<template>
  <el-form
    :model="formData"
    v-bind="options"
    :show-message="false"
    :validate-on-rule-change="false"
  >
    <draggable
      v-model="currNode"
      :class="currNode.children.length === 0 ? 'empty' : ''"
      @mouseoverNode="mouseoverNode"
      @activeNode="activeNode"
      @deleteNode="deleteNode"
    />
  </el-form>
</template>

<script setup>
import { ref, computed } from 'vue';
import Draggable from '@/admin/visual/draggable.vue';
import visual from "@/visual/js/visual";

const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode'])
const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const formData = ref({});

const activeNode = (node) => {
  emit('activeNode', node);
};

const deleteNode = (item) => {
  emit('deleteNode', item, currNode.value.children);
};

const mouseoverNode = (item) => {
  emit('mouseoverNode', item)
};

const options = computed(() => {
  const compStyle = props.compStyle || {};

  const data = {};
  visual.addIfNotNull(data, compStyle, 'inline');
  visual.addIfNotNull(data, compStyle, 'size');
  visual.addIfNotNull(data, compStyle, 'labelPosition');
  visual.addIfNotNull(data, compStyle, 'labelWidth');
  visual.addIfNotNull(data, compStyle, 'labelSuffix');
  visual.addIfNotNull(data, compStyle, 'disabled');
  visual.addIfNotNull(data, compStyle, 'hideRequiredAsterisk');
  visual.addIfNotNull(data, compStyle, 'requireAsteriskPosition');
  visual.addIfNotNull(data, compStyle, 'disabled');
  return data;
});
</script>